<template>
  <div
    ref="chart"
    id="heatmap-container"
    class="plotly-chart"
    style="overflow-y: scroll; overflow: hidden; width: 90%; margin: 0 auto"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, ref, defineExpose } from 'vue'
import Plotly from 'plotly.js-dist'

// 获取 DOM 元素的引用
const chart = ref(null)

const props = defineProps({
  graphDataList: {
    type: Object,
    default: () => {},
  },
})

var data = []
const childMethod = () => {
  
  // 定义第二个子图的热力图数据
  const heatmapData = {
    z: props.graphDataList != null ? props.graphDataList.z : [],
    x: props.graphDataList != null ? props.graphDataList.x : [],
    y: props.graphDataList != null ? props.graphDataList.y : [],
    hoverinfo: 'none',
    type: 'heatmap',
    // colorscale: 'Viridis',
    showscale: true,
    // opacity: 0.9,
    xaxis: 'x2', // 绑定到辅助 x 轴
    cells: {
      line: {
        width: 3.5, // 边框宽度
        color: 'black', // 边框颜色
      },
    },
  }

  const dataMix = [heatmapData]
  // 布局配置
  // const layout = {

  //   // Primary x-axis and y-axis
  //   showlegend: false, // 隐藏图例
  //   // xaxis: {
  //   //   domain: [1.55, 1], // Set the domain for the first plot (left side)
  //   // },
  //   // xaxis: {
  //   //   title: 'X轴',
  //   //   // 加粗x轴方向的分隔线
  //   //   showgrid: true,
  //   //   gridwidth: 7,
  //   //   gridcolor: 'rgba(0, 0, 0, 1)'
  //   // },
  //   yaxis: {
  //     title: 'Y轴',
  //     // 加粗y轴方向的分隔线
  //     showgrid: true,
  //     // gridwidth: 1,
  //     gridcolor: 'rgba(0, 0, 0, 1)' ,
  //     // ticklabelalign: 'center' // 设置标签水平居中
  //     fixedrange: true
  //   },

  //   // height: '300%',
  //   // Add some spacing between the two plots
  //   margin: { l: 140, r: 50, b: 50, t: 20 },
  //   // height: 3000, // 示例高度，按数据行数调整

  // }

  // 绘制图表
  // Plotly.newPlot(chart.value, dataMix, layout);

  // 模拟数据标签（根据实际情况替换）
  const labels = props.graphDataList.y != null ? props.graphDataList.y : []

  // 计算刻度值（使刻度位于方块中心）
  const tickVals = Array.from({ length: labels.length }, (_, i) => i - 0.5)

  const data = [
    {
      hoverinfo: 'none',
      type: 'heatmap',
      // 模拟数据（根据实际情况替换）
      z: props.graphDataList != null ? props.graphDataList.z : [],
      opacity: 0.9,
      y: props.graphDataList != null ? props.graphDataList.y : [],
      x: props.graphDataList != null ? props.graphDataList.x : [], // 使用计算后的刻度值

      hoverinfo: 'none',
      colorscale: 'Plasma',
    },
  ]

  var arr = [];
  if(props.graphDataList.x!=null && props.graphDataList.x.length>1){
    for(var i=0;i<props.graphDataList.x.length-1;i++){
      arr.push({
        type: 'line',
        x0: 0.5+i, // 位于 a3galt2（索引 0）和 xxx（索引 1）中间
        x1: 0.5+i,
        y0: 0, // 竖线起始于图表底部
        y1: 1, // 竖线结束于图表顶部
        xref: 'x', // 关联 x 轴坐标
        yref: 'paper', // 基于图表区域高度（0 到 1）
        line: { color: 'white', width: 1 }, // 自定义竖线样式（颜色、宽度）
      })
    }
  }

  

  const layout = {
    shapes:arr,
    yaxis: {
      tickmode: 'array',
      tickvals: tickVals,
      ticktext: labels,
      tickalign: 'top', // 刻度线居中
      title: '',
      showgrid: true,
      zeroline: true,
      tickfont: {
        size: 9, // 调整字体大小，可根据需求修改，如设为10、14等
      },
      // gridwidth: 1,
      gridcolor: 'rgba(0, 0, 0, 1)',
      // ticklabelalign: 'center' // 设置标签水平居中
      // fixedrange: true,
    },
    // xaxis: {
    //   showgrid: true,
    //   zeroline: false,
    //   showticklabels: false
    // },
    title: '热力关系图',
    margin: { t: 40, l: 130, r: 20, b: 20 }, // 调整边距适配左侧标签
  }

  Plotly.newPlot('heatmap-container', data, layout).then((plot) => {
    const tickLabels = document.querySelectorAll('.ytick text')

    // // 向上偏移 0.5em（可根据需求调整数值，负数为向上，正数为向下）
    tickLabels.forEach((label) => {
      // label.setAttribute('text-anchor', 'middle');
      // 垂直居中（新增属性）
      label.setAttribute('dominant-baseline', 'middle') // 中线对齐，视觉居中
      // 或使用更精准的中心点对齐（适合含大小写混合的文本）
      // label.setAttribute('dominant-baseline', 'central');
      // 微调垂直位置（可选，根据刻度线位置调整）
      // label.setAttribute('dy', '0px') // 默认为 0，如需偏移可设为负值（向上）或正值（向下）
      // console.log(label);
      label.setAttribute('dy', '-0.8em') // 关键：设置负的 dy 值
      // label.setAttribute('text-anchor', 'middle'); // 配合水平居中（确保文本中心点对齐）
    })
  })
}
// 向父组件暴露方法
defineExpose({
  childMethod,
})

onMounted(() => {
  childMethod()
})
</script>

<style scoped>
.plotly-chart {
  width: 100%;
  height: 100%;
  /* margin-left:60px ; */
}
</style>
